<template>
  <div>
    <div class="container">
      <navbar title="易购登录"></navbar>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="uid"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="pwd"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
          <div class="regusterbox"><span class="register">没有账号点击注册?</span></div>
        <div style="margin:0 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            color="#e74c3c"
            >提交</van-button
          >
        </div>
     
      </van-form>
    </div>
  </div>
</template>

<script>
import {login} from "../api"
import Navbar from "../components/Navbar.vue";
import { Toast } from 'vant';
import { mapMutations } from 'vuex';
export default {
  components: { Navbar },
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    ...mapMutations([
            'updateUserinfo', //also supports payload `this.nameOfMutation(amount)` 
        ]),
    async onSubmit(values) {
        Toast.loading({ message: '加载中...',forbidClick: true,duration:0})
        let {uid,pwd} = values
        let params = {name:uid,pwd}
        let  data = await login(params)
        this.username = '',
        this.password = '',
        console.log(data);
        let {code} = data.data
        Toast.clear()
        if(code==200)
        {
            Toast.success('登录成功')
            let userinfo = data.data.data
            userinfo = userinfo[0]
           this.updateUserinfo(userinfo)
           this.$router.push('/')
        }else if(code==201)
        {
            Toast.fail('登录失败账号或密码错误')
        }
    },
  },
};
</script>

<style lang="scss" scoped>
.regusterbox{
    display: flex;
    justify-content: flex-end;
}
.register {
  display: inline-block;
  margin: 1rem 0;
  color: #00000066;
}
.container {
  padding: 0 1rem;
}
</style>